<template>
	<view>
		<view class="content " style="width: 100%;" >
			<view class="list " style="width: 100%;">
				<view class="row jui_flex jui_bg_fff jui_flex_justify_between jui_flex_items_center jui_bor_bottom" v-for="(item, index) in addressList" :key="index" @tap="useAddress(item)">
					<!-- <checkbox  :checked="row.default == 1" /> -->
					<view class="jui_mar_l20 jui_flex jui_flex_justify_between jui_flex_items_center" style="width: 95%;">
						<view class="center jui_mar_t20">
							<view class="name-tel">
								<view class="jui_flex jui_flex_items_center jui_font_w500">
									<text class="name">{{item.recipient}}</text>
									<text class="phone">{{item.recipientPhone}}</text>
								</view>
								<view class="default" v-if="item.default == '2'">
									默认
								</view>
							</view>
							<view class="address jui_mar_t20 jui_ellipsis_2">{{item.district}}</view>
							<view class="address jui_mar_t20 jui_ellipsis_2">{{item.address}}</view>
						</view>
						<view class="right">
							<image src="../../../static/imgs/user/edit.png" mode="" style="width: 26upx;height: 26upx;" @tap.stop="jump(`/pages/user/address/edit/edit?editType=edit&id=${item.id}`)"></image>
						</view>
					</view>
				</view>
				<!-- 空白页 -->
				<empty position="jui_fixed" v-if="addressList.length < 1"></empty>
			</view>
		</view>
		<view class="jui_public_btn" style="position: fixed;bottom: 20rpx;left: 0;width: 100%;">
			<button @tap="jump(`/pages/user/address/edit/edit?editType=add`)">
				新增地址
			</button>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				from:'',
				addressList: []
			};
		},
		onLoad(opt) {
			this.from = opt.from;
		},
		onShow() {
			this.init();
		},
		methods:{
			init() {
				let userId = uni.getStorageSync('uid');
				let _token = uni.getStorageSync('token');
				let params = {
					userId:userId,
					_token:_token
				}
				this.$api.getSite(params).then(res => {
					if (res.ok) {
						this.addressList = res.data;
					}
				});
			},
			useAddress(address) {
				if(this.from == "confirmOrder"){
					let pages = getCurrentPages();
					let currPage,
						prevPage;
					// #ifdef MP-WEIXIN || APP-PLUS
					currPage = pages[pages.length - 1].$vm;
					prevPage = pages[pages.length - 2].$vm; //上一个页面
					// #endif
					// #ifdef H5
					currPage = pages[pages.length - 1];
					prevPage = pages[pages.length - 2]; //上一个页面
					// #endif
					prevPage.address = address;
					prevPage.addressId = address.id;
					uni.navigateBack({
						delta: 1
					});
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}
	/* view {
		display: flex;
	} */

	/deep/ uni-checkbox:not([disabled]) .uni-checkbox-input:hover {
		border-color: #1876FF
	}

	/deep/ uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
		color: #1876FF !important;
	}

	/deep/ uni-checkbox .uni-checkbox-input {
		border-radius: 50%;
		border: 2upx solid #1876FF;
		height: 40upx;
		width: 40upx;
	}

	.icon {
		// &.bianji {
		// 	&:before{content:"\e61b";}
		// }
		// &.tianjia {
		// 	&:before{content:"\e81a";}
		// }
	}

	.add {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 120upx;
		justify-content: center;
		align-items: center;

		.btn {
			box-shadow: 0upx 5upx 10upx rgba(0, 0, 0, 0.4);
			width: 90%;
			
			height: 80upx;
			border-radius: 80upx;
			background-color:$zhuse;
			color: #fff;
			justify-content: center;
			align-items: center;
			
			.icon {
				height: 80upx;
				color: #fff;
				font-size: 30upx;
				justify-content: center;
				align-items: center;
			}

			font-size: 30upx;
		}
	}

	.list {
		flex-wrap: wrap;

		.row {
			width: 96%;
			margin: 0 auto;
			margin-top: 10rpx;
			border-radius: 10rpx;
			padding: 20upx 2%;

			.left {
				width: 90upx;
				flex-shrink: 0;
				align-items: center;

				.head {
					width: 70upx;
					height: 70upx;
					background: linear-gradient(to right, #ccc, #aaa);
					color: #fff;
					justify-content: center;
					align-items: center;
					border-radius: 60upx;
					font-size: 35upx;
				}
			}

			.center {
				width: 100%;
				flex-wrap: wrap;

				.name-tel {
					width: 100%;
					display: flex;
					align-items: baseline;

					.name {
						font-size: 32upx;
						color:#00c9ff;
					}
					.phone {
						margin-left: 80rpx;
						font-size: 28upx;
						margin-left: 20upx;
						color:rgb(250, 140, 22);
						background-color: rgb(255, 247, 230);
						border-radius:10rpx
					}
					.tel {
						margin-left: 30upx;
						font-size: 24upx;
						color: #777;
					}

					.default {

						font-size: 22upx;

						background-color: #FF4141;
						color: #fff;
						padding: 0 18upx;
						border-radius: 4upx;
						margin-left: 20upx;
					}
				}

				.address {
					// width: 100%;
					font-size: 24upx;
					align-items: baseline;
					color: #333;
				}
			}

			.right {
				flex-shrink: 0;
				align-items: center;
				margin-left: 20upx;

				.icon {
					justify-content: center;
					align-items: center;
					width: 80upx;
					height: 60upx;
					border-left: solid 1upx #aaa;
					font-size: 40upx;
					color: #777;
				}
			}
		}
	}
</style>
